<template>
	<view class="bgBox">
		<u-navbar bgColor="#D9EDD4" autoBack title="消息" fixed safeAreaInsetTop placeholder>
			<view class="all-read" slot="right">
				<u-icon name="/static/images/clear.png" size="15"></u-icon>
				<text class="all-readText">全部已读</text>
			</view>
		</u-navbar>
		<view class="page-content">
			<view class="news-item" v-for="(item,index) in newsList" :key="index">
				<view class="item-left">
					<u-avatar size="60" :src="item.newsAvatar"></u-avatar>
					<view class="item-detail">
						<view class="item-name">{{item.newsName}}</view>
						<view class="item-text">{{item.newsText}}</view>
					</view>
				</view>
				<view class="item-right">
					<text>{{item.newsDate}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				newsList:[
					{
						newsAvatar:'/static/images/avatar/news-deliver.png',
						newsName:'物流助手',
						newsText:'商品带取件提醒',
						newsDate:'上午10：30'
					},
					{
						newsAvatar:'/static/images/avatar/avatar-ring.jpg',
						newsName:'ka迪官方旗舰店',
						newsText:'您购买的商品已到货啦~',
						newsDate:'上午9：30'
					},
					{
						newsAvatar:'/static/images/avatar/avatar-ring1.jpg',
						newsName:'DR专营店',
						newsText:'您收藏的商品降价了',
						newsDate:'06/02'
					}
				]
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.bgBox{
		.all-read{
			display: flex;
			.all-readText{
				font-size: $uni-font-size-base;
				color: $gs-color-grey;
				padding: 0 $uni-spacing-row-sm;
			}
		}
		.page-content{
			margin: $uni-spacing-row-lg;
			.news-item{
				padding: $uni-spacing-col-lg $uni-spacing-row-sm;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: dashed 2px $uni-border-color;
				.item-left{
					display: flex;
					align-items: center;
					.item-detail{
						padding: 0 $uni-spacing-row-lg;
						.item-name{
							color: $uni-text-color;
							padding: $uni-spacing-col-sm 0;
						}
						.item-text{
							font-size: $uni-font-size-sm;
							color: $gs-color-grey;
						}
					}
				}
				.item-right{
					font-size: $uni-font-size-sm;
					color: $gs-color-grey;
				}
			}
		}
	}
</style>